<template>
  <div ref="echartsContainer" class="echartsContainer">

 </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
  export default {
    name:'LineEchart',
    mounted(){
        // console.log(echarts)
      let mycharts = echarts.init(this.$refs.echartsContainer)
      let options = {
        grid:{
          left:0,
          right:0,
          top:0,
          bottom:0
        },
        xAxis:{
          type:'category',
          show:false,
          boundaryGap:false
        },
        yAxis:{
          show:false

        },
        series:{
          type:'line',
          data:[20,30,10,16,22,35],
          smooth:true,
          symbol:'none',
          areaStyle:{
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
              }, {
                  offset: 1, color: '#f89' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }

        },
      }
      mycharts.setOption(options)
      window.addEventListener('resize',()=>{
       
          mycharts.resize()
        })

    }
  }
</script>

<style lang="scss" scoped>
  .echartsContainer{
    width: 100%;
    height: 100%;
  }
</style>